<template>
	<view class="supplier">
		<view class="back">
			<view class="icon-left">
				<u--image src="../../../static/images/icon-back.svg" width="8px" height="15px"></u--image>
			</view>
			<view class="txt-tab">
				<u--input
					style="background: #F7F8FA;height: 36px;line-height: 36px;padding: 0 10px;"
					placeholder="前置图标"
					border="none"
					shape="circle"
					prefixIcon="search"
					prefixIconStyle="font-size: 14px;color: rgba(46, 48, 51, 0.6)"
					></u--input>
			</view>
		</view>
		<view style="margin-top: 23px;;width: 95%;margin: 23px auto 0 auto;display: flex;align-items: center;">
			<view style="flex: 1;">
				<u--image src="" style="display: inline-block;vertical-align: middle;" width="30px" height="30px"></u--image>
				<text style="font-size: 16px;color: #2E3033;vertical-align: middle;margin-left: 10px; ">福建北峰科技股份有限公司</text>
			</view>
			<u--image src="" @click="showPop = true" style="display: inline-block;vertical-align: middle;flex: 0 0 20px;" width="17px" height="18px"></u--image>
		</view>
		
		<view style="height: 195px;margin: 20px auto;">
			<u-swiper height="195px" :list="swiperList"
			></u-swiper>
		</view>
		
		<view style="display: flex;">
			<text :style="{color: tabIndex == 0 ? '#EF312A' : '#2E3033'}" @click="tabIndex = 0" style="flex: 1;text-align: center;font-size: 14px;color: #2E3033">供应商装备</text>
			<text :style="{color: tabIndex == 1 ? '#EF312A' : '#2E3033'}" @click="tabIndex = 1" style="flex: 1;text-align: center;font-size: 14px;color: #2E3033">供应商介绍</text>
			<text :style="{color: tabIndex == 2 ? '#EF312A' : '#2E3033'}" @click="tabIndex = 2" style="flex: 1;text-align: center;font-size: 14px;color: #2E3033">装备展示</text>
			<text :style="{color: tabIndex == 3 ? '#EF312A' : '#2E3033'}" @click="tabIndex = 3" style="flex: 1;text-align: center;font-size: 14px;color: #2E3033">场景方案</text>
		</view>
		
		<view class="content-list" style="margin-top: 30px;" v-if="tabIndex == 0">
			<view class="content-list-left">
				<text style="margin-bottom: 25px;display: block;text-align: center;;font-weight: 400;font-size: 16px;color: #2E3033;">全部分类</text>
			</view>
			<view class="content-list-right" >
				<view style="display: flex;border-bottom: 1px solid rgba(46, 48, 51, 0.1);margin-bottom: 15px;padding-bottom: 10px;" v-for="item in 5">
					<view style="width: 60px;">
						<u--image src="" style="display: inline-block;vertical-align: middle;" width="60px" height="60px"></u--image>
					</view>
					<view style="flex: 1;font-size: 14px;margin-left: 10px;">
						<text>BF-TD880防爆对讲机</text>
						<text style="display: block;margin-top: 5px;">北峰TD880 IIB级防爆对讲机严格按照中国防爆电气标</text>
					</view>
				</view>
			</view>
		</view>
		
		<view style="margin-top: 30px;" v-if="tabIndex == 1">
			<view style="text-align: center;font-size: 18px;color: #2E3033;width: 100%;">福建北峰通信科技股份有限公司</view>
			<view style="margin-top: 15px;width: 95%;margin-left: auto;margin-right: auto;">
				11
			</view>
		</view>
		
		<!-- 展示 -->
		<view v-if="tabIndex == 2">
			<view class="tab-check">
				<text :class="[tabCheckIndex == 0 ? 'active' : '']" @click="tabCheckIndex = 0" class="checktxt ">装备视频</text>
				<text :class="[tabCheckIndex == 1 ? 'active' : '']" @click="tabCheckIndex = 1" class="checktxt">装备图片</text>
			</view>
			<view class="content-list">
				<u-row gutter="10" align="center" customStyle="margin-bottom: 10px;width: 100%">
					<u-col span="6"  style="box-shadow: 0px 3px 6px 1px #EEE8E8;">
						<view class="demo-layout bg-purple-light">
							<view style="width: 100%;height: 167px;position: relative;">
								<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" width="100%" height="100%"></u--image>
								<view style="text-align: center;font-size: 12px;color: #fff;position: absolute;right: 0;bottom: 10px;width: 70px;height: 27px;line-height:27px;border-radius: 15px 0px 0px 15px;background: #2E3033;opacity: 0.6;">
									<u--image src="../../static/images/play.svg" style="vertical-align: middle;display: inline-block;" width="11px" height="11px"></u--image>
									<text style="display: inline-block;vertical-align: middle;margin-left: 5px;">53:38</text>
								</view>
							</view>
							<view style="text-align: left;box-sizing: border-box;padding: 15px;">
								<text style="display: block;color: #2E3033;font-size: 16px;">主要标题</text>
								<text style="display: block;color: rgba(46, 48, 51, 0.6);font-size: 14px;">5662次播放</text>
							</view>	
						</view>
					</u-col>
					<u-col span="6"  style="box-shadow: 0px 3px 6px 1px #EEE8E8;">
						<view class="demo-layout bg-purple-light">
							<view style="width: 100%;height: 167px;position: relative;">
								<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" width="100%" height="100%"></u--image>
								<view style="text-align: center;font-size: 12px;color: #fff;position: absolute;right: 0;bottom: 10px;width: 70px;height: 27px;line-height:27px;border-radius: 15px 0px 0px 15px;background: #2E3033;opacity: 0.6;">
									<u--image src="../../static/images/play.svg" style="vertical-align: middle;display: inline-block;" width="11px" height="11px"></u--image>
									<text style="display: inline-block;vertical-align: middle;margin-left: 5px;">53:38</text>
								</view>
							</view>
							<view style="text-align: left;box-sizing: border-box;padding: 15px;">
								<text style="display: block;color: #2E3033;font-size: 16px;">主要标题</text>
								<text style="display: block;color: rgba(46, 48, 51, 0.6);font-size: 14px;">5662次播放</text>
							</view>	
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
		
		<view style="margin-top: 15px;" v-if="tabIndex == 3">
			<view class="lists" @click="detail">
				<text class="lists-p">多媒体综合云调度平台</text>
				<text class="lists-desc">北峰多媒体综合云调度平台是一套纯云部署的综合管理应用软件，
包括会议系统、紧急报警系统、定位系统、对讲系统、监控系...</text>

				<text class="lists-office">附件：xxx附件.pdf</text>
				<view style="display: flex;margin-bottom: 10px;">
					<text style="color: rgba(46, 48, 51, 0.6);font-size: 12px;flex: 1;text-align: center">所属装备:多媒体综合云调度平台</text>
					<text style="color: rgba(46, 48, 51, 0.6);font-size: 12px;flex: 1;text-align: center">时间:2024-03-20 11:09:54</text>
				</view>
			</view>
			<u-line></u-line>
		</view>
		
		<u-popup
		mode="center" 
		:show="showPop" 
		:round="10" 
		:safeAreaInsetBottom="false"
		@close="bindClose"
		@open="bindOpen">
			<view style="width: 315px;padding: 15px;border-radius: 10px;">
				<view class="more-tit">更多</view>
				<view class="more-btn" >
					销售电话：0551-12547852
				</view>
				<view class="more-btn" >售后电话：0551-12547852
				</view>
			</view>
		</u-popup>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPop: false,
				tabIndex: 0,
				tabCheckIndex: 0,
				swiperList: []
			}
		},
		methods: {
			close() {},
			open() {},
			detail() {
				uni.navigateTo({
					url: '/pages/components/supplier/detail'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.supplier {
		position: relative;
		
		.back {
			position: relative;
			width: 95%;
			margin: 0 auto;
			height: 44px;
			line-height: 44px;
			box-sizing: border-box;
			padding: 0 15px;
			border-bottom: 1px solid #eee;
			
			
			.icon-left {
				position: absolute;
				left: 0;
				top: 46%;
				transform: translateY(-50%);
			}
			.txt-tab {
				position: absolute;
				width: 90%;
				left: 25px;
				text-align: center;
				font-size: 16px;
				color: #2E3033;
				
				.txt-tab-default {
					color: rgba(46, 48, 51, 0.6);
					display: inline-block;
				}
				.txt-tab-active {
					color: rgba(46, 48, 51, 1);
					margin-right: 30px;
					display: inline-block;
				}
			}
		}
		
		.content-list {
			width: 95%;
			margin: 15px auto;
			display: flex;
			
			.content-list-left {
				flex: 0 0 100px;
				background-color: #F7F8FA;
				box-sizing: border-box;
				padding: 15px;
				border-radius: 5px 5px 5px 5px;
				margin-right: 15px;
			}
			.content-list-right {
				flex: 1;
				
			}
		}
		
		.tab-check {
			width: 200px;
			height: 40px;
			background: #F7F8FA;
			margin: 15px auto;
			border-radius: 25px;
			
			.checktxt {
				width: 100px;
				height: 40px;
				text-align: center;
				font-size: 14px;
				color: #2E3033;
				display: inline-block;
				line-height: 40px;
			}
			.active {
				background: #EF312A;
				color: #fff;
				border-radius: 25px;
			}
		}
		
		.lists {
			width: 90%;
			margin: 0 auto;
			
			text {
				display: block;
			}
			.lists-p {
				font-size: 14px;
				color: #2E3033;
			}
			.lists-desc {
				font-weight: normal;
				font-size: 12px;
				color: #2E3033;
				display: block;
				margin: 10px auto;
				color: rgba(46, 48, 51, 0.6);
				
				overflow: hidden; /* 确保内容超出容器时会被隐藏 */
			  display: -webkit-box; /* 作为弹性伸缩盒子模型显示 */
			  -webkit-line-clamp: 2; /* 限制在两行 */
			  -webkit-box-orient: vertical; /* 垂直排列盒子 */
			  text-overflow: ellipsis; /* 多出的文本用省略号表示 */
			  white-space: normal; /* 允许文本换行 */
			}
			.lists-office {
				font-weight: normal;
				font-size: 12px;
				color: #EF312A;
				margin-bottom: 15px;
			}
			
		}
	}
	.more-tit {
		font-weight: normal;
		font-size: 16px;
		color: #2E3033;
		line-height: 0px;
		text-align: center;
		font-style: normal;
		text-transform: none;
		margin-top: 15px;
		margin-bottom: 30px;
	}
	.more-btn {
		width: 100%;
		height: 50px;
		
		background: #F7F8FA;
		border-radius: 10px 10px 10px 10px;
		text-align: center;
		line-height: 50px;
		margin-bottom: 10px;
		
		font-weight: normal;
		font-size: 14px;
		color: #2E3033;
		font-style: normal;
		text-transform: none;
	
	}
</style>